{"componentChunkName":"component---src-templates-blog-post-js","path":"/Today I Learned/반응형_폼_유효성검사/","result":{"data":{"site":{"siteMetadata":{"title":"JULog","author":"[Ju Chan Hwang]","siteUrl":"https://julog.netlify.app","comment":{"disqusShortName":"","utterances":"JuChanHwang/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"bb3b08a8-2e5f-5c99-a988-e1b0039ef2cd","excerpt":"반응형 폼 유효성 검사 반응형 폼에서는 유효성 검사 결과가 컴포넌트 클래스에서 전달됩니다. 그래서 유효성 검사 어트리뷰트는 템플릿에서 적용하지 않고 컴포넌트 클래스에서 폼 컨트롤 모델을 정의할 때 유효성 검사기로 적용합니다. 이 함수는 해당 폼 컨트롤의 값이 변경될 때마다 실행됩니다. 이 함수의 실제 역할은 팩토리 함수일 뿐이며, 금지할 이름에 해당하는 정규 표현식을 인자로 받고 유효성 검사기를 함수 형태로 반환합니다. 컴포넌트에 정의한 대로라면 “bob”이라는 이름이 금지되며, “bob…","html":"<ul>\n<li>\n<p>반응형 폼 유효성 검사</p>\n<blockquote>\n<p>반응형 폼에서는 유효성 검사 결과가 컴포넌트 클래스에서 전달됩니다. 그래서 유효성 검사 어트리뷰트는 템플릿에서 적용하지 않고 컴포넌트 클래스에서 폼 컨트롤 모델을 정의할 때 유효성 검사기로 적용합니다. 이 함수는 해당 폼 컨트롤의 값이 변경될 때마다 실행됩니다.</p>\n</blockquote>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">/** 히어로의 이름은 인자로 받은 정규표현식에 매칭되지 않아야 합니다.  */\nexport function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {\n  return (control: AbstractControl): {[key: string]: any} | null => {\n    const forbidden = nameRe.test(control.value);\n    return forbidden ? {'forbiddenName': {value: control.value}} : null;\n  };</code></pre></div>\n<p>이 함수의 실제 역할은 팩토리 함수일 뿐이며, <em>금지할 이름에 해당하는</em> 정규 표현식을 인자로 받고 유효성 검사기를 <strong>함수 형태</strong>로 반환합니다.</p>\n<p>컴포넌트에 정의한 대로라면 “bob”이라는 이름이 금지되며, “bob”이 아닌 값은 모두 유효합니다. 다른 이름을 금지하려면 인자로 전달하는 정규 표현식을 수정하면 됩니다.</p>\n<p><code class=\"language-text\">forbiddenNameValidator</code> 팩토리는 유효성 검사기를 반환합니다. 이 함수는 Angular 폼 컨트롤 객체를 인자로 받으며, 유효성 검사에 실패하면 <strong>에러 오브젝트를 반환</strong>하고 유효성 검사를 통과하면 <strong>null</strong>을 반환합니다. 에러 오브젝트의 프로퍼티는 보통 유효성 검사기의 이름을 지정하기 때문에 <code class=\"language-text\">'forbiddenName'</code>으로 선언했으며, 이 프로퍼티의 값은 폼 컨트롤의 현재 값을 할당했습니다. 이 에러 객체를 활용하면 어떤 값이 입력되어서 잘못되었는지 템플릿에 표시할 수 있습니다.</p>\n<p>커스텀 비동기 유효성 검사기는 반환 타입이 Promise나 Observable인 것만 빼면 동기 유효성 검사기와 비슷하며, 이 객체 안에 에러 객체나 null을 반환합니다. 만약 반환 타입이 옵저버블이라면 유효성 검사 로직이 종료된 이후에 이 옵저버블은 반드시 종료되어야 합니다.</p>\n</li>\n</ul>","frontmatter":{"title":"반응형 폼 유효성 검사","date":"November 19, 2019"}}},"pageContext":{"slug":"/Today I Learned/반응형_폼_유효성검사/","previous":{"fields":{"slug":"/Today I Learned/form_data/"},"frontmatter":{"title":"form data","category":"Today I Learned","draft":false}},"next":{"fields":{"slug":"/Today I Learned/RXJS_of()/"},"frontmatter":{"title":"RXJS of()","category":"Today I Learned","draft":false}}}},"staticQueryHashes":["3128451518","96099027"]}